<template>
  <el-card class="keywordsChart">
    <div class="keywordsChart__title">关键词搜索</div>
    <el-table :data="tableDate">
      <el-table-column
        label="排名"
        type="index"
        width="120"
        max-height="240"
        align="center"
      ></el-table-column>
      <el-table-column label="关键字" prop="word"></el-table-column>
      <el-table-column label="搜索数量" prop="count"></el-table-column>
      <el-table-column label="搜索用户数" prop="user"></el-table-column>
      <el-table-column label="搜索占比">
        <template v-slot="{ row }">
          {{ `${((row.user / row.count) * 100).toFixed(2)}%` }}
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="mt-10"
      layout="prev, pager, next"
      :total="searchWord.length"
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
    />
  </el-card>
</template>

<script lang="ts">
export default {
  name: "keywordsChart",
};
</script>

<script lang="ts" setup>
import { ref, watch } from "vue";
import type { SearchItem } from "../keywordsAndCategory/index.vue";
const pageSize = ref(5);
const currentPage = ref(1);
const props = defineProps<{
  searchWord: SearchItem[];
}>();
const tableDate = ref([
  {
    word: "北京",
    count: 3440,
    user: 1626,
  },
  {
    word: "上海",
    count: 8101,
    user: 6660,
  },
  {
    word: "广州",
    count: 7814,
    user: 2196,
  },
  {
    word: "深圳",
    count: 8888,
    user: 7102,
  },
  {
    word: "南京",
    count: 6204,
    user: 1949,
  },
]);

watch(currentPage, (currentPage) => {
  tableDate.value = props.searchWord.slice(
    -5 + currentPage * 5,
    0 + currentPage * 5
  );
});
</script>

<style scoped>
.keywordsChart {
  height: 600px;
  box-sizing: border-box;
}
</style>
